<template>
	<view class="page">
		<view class="carousel">
			<swiper indicator-dots circular=true duration="400">
				<swiper-item class="swiper-item" v-for="(item,index) in bannerImage" :key="index">
					<view class="image-wrapper">
						<image :src="item.url" class="loaded" ></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="input-view">
			<uni-icon type="search" size="22" color="#666666" />
			<input confirm-type="search" class="input" type="text" placeholder="输入搜索关键词" @confirm="confirm" />
		</view>
		<view class="goods-by-type" v-for="(item,index) in goodsType" :key="index">
			<view class="type-name">{{item.name}}</view>
			<view v-if="item.type=='v'" class="two-col">
				<image v-for="(good,index) in item.goods" :key="index" :src="good.image" mode="widthFix"></image>
			</view>
			<view v-if="item.type=='h'" v-for="(good,index) in item.goods" :key="index" class="good-item">
				<image :src="good.image"></image>
				<view class="good-item-info">
					<text>{{ good.title }}</text>
					<text class="good-item-info-price">￥{{ good.price }}</text>
					<image src="http://yao.hayzon.com/static/goods/cart.png"></image>
				</view>
			</view>
			<scroll-view v-if="item.type=='vh'" class="scroll-view_H" scroll-x="true" scroll-left="120">
				<view v-for="(good,index) in item.goods" :key="index" class="vh-good-item scroll-view-item_H">
					<image :src="good.image"></image>
					<text>{{ good.title }}</text>
					<text class="vh-good-item-info-price">￥{{ good.price }}</text>
				</view>
			</scroll-view>
		</view>
		<view class="cart-head">
			<image src="http://yao.hayzon.com/static/cart/shop.png"></image>
			<text>康品优选</text>
			<text class="edit">进入店铺></text>
		</view>
		<view class="discount-box" v-for="(item,index) in discounts" :key="index">
			<view>
				<text>{{item.disnumber}}</text>
				<text>元</text>
			</view>
			<view>
				<text>{{item.name}}</text>
				<text>{{item.info}}</text>
			</view>
			<view>立即领取</view>
		</view>
		<view class="foot-link-box">
			<text>店铺主页</text>
			<text>|</text>
			<text>个人中心</text>
			<text>|</text>
			<text>店铺信息</text>
		</view>
		<view class="ask-fix-icon">
			<image src="http://yao.hayzon.com/static/goods/cart.png"></image>
		</view>
	</view>
</template>

<script>
	import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'
	import uniIcon from '@/components/uni-icon/uni-icon.vue'

	export default {
		components: {
			uniSwiperDot,
			uniIcon
		},
		data() {
			return {
				bannerImage: [{
						colorClass: 'uni-bg-red',
						url: 'http://yao.hayzon.com/static/goods/banner1.png',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'http://yao.hayzon.com/static/goods/banner2.png',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'http://yao.hayzon.com/static/goods/banner3.png',
						content: '内容 C'
					}
				],
				goodsType: [{
					type: "v",
					name: "爆款推荐",
					goods: [{
						image: "http://yao.hayzon.com/static/goods/01.png",
						title: "方茶",
						price: "36"
					}, {
						image: "http://yao.hayzon.com/static/goods/02.png",
						title: "方茶",
						price: "36"
					}]
				}, {
					type: "h",
					name: "镇店之宝",
					goods: [{
						image: "http://yao.hayzon.com/static/goods/g1.png",
						title: "九物调中茶 | 一盒30包",
						price: "57.30"
					}, {
						image: "http://yao.hayzon.com/static/goods/g2.png",
						title: "九蒸九晒黑芝麻丸 | 道家制作工艺。手作辟谷蜜丸",
						price: "36"
					}]
				}, {
					type: "h",
					name: "馈赠佳品",
					goods: [{
						image: "http://yao.hayzon.com/static/goods/g3.png",
						title: "茶油紫草研磨皂 | 低温冷制工艺。洁肤手工皂。",
						price: "38.30"
					}, {
						image: "http://yao.hayzon.com/static/goods/g4.png",
						title: "正安国货铺 怡宁香囊 卧室睡眠睡觉安神缓解改善疲劳",
						price: "59.90"
					}]
				}, {
					type: "h",
					name: "养生零食",
					goods: [{
						image: "http://yao.hayzon.com/static/goods/g5.png",
						title: "酸枣糕 | 酸甜可口 传承道地 手工制作 寻回儿时的味道",
						price: "32.30"
					}, {
						image: "http://yao.hayzon.com/static/goods/g6.png",
						title: "“山楂蜜丸” 消积食 健脾胃",
						price: "56.00"
					}]
				}, {
					type: "h",
					name: "日常理疗",
					goods: [{
						image: "http://yao.hayzon.com/static/goods/g7.png",
						title: "五年陈艾薪艾柱 54柱/袋 随身灸 手工艾绒 艾草",
						price: "99.00"
					}, {
						image: "http://yao.hayzon.com/static/goods/g8.png",
						title: "【有温度的家】艾绒护膝保护艾草膝盖关节老寒腿男",
						price: "88.00"
					}]
				}, {
					type: "vh",
					name: "中医学习课",
					goods: [{
						image: "http://yao.hayzon.com/static/goods/g7.png",
						title: "五年陈艾薪艾柱 54柱/袋 随身灸 手工艾绒 艾草",
						price: "99.00"
					}, {
						image: "http://yao.hayzon.com/static/goods/g8.png",
						title: "【有温度的家】艾绒护膝保护艾草膝盖关节老寒腿男",
						price: "88.00"
					}, {
						image: "http://yao.hayzon.com/static/goods/g7.png",
						title: "五年陈艾薪艾柱 54柱/袋 随身灸 手工艾绒 艾草",
						price: "99.00"
					}, {
						image: "http://yao.hayzon.com/static/goods/g8.png",
						title: "【有温度的家】艾绒护膝保护艾草膝盖关节老寒腿男",
						price: "88.00"
					}]
				}],
				discounts: [{
					disnumber: "40",
					name: "优惠卷",
					info: "满218.00元可用"
				}, {
					disnumber: "100",
					name: "SVIP优惠卷",
					info: "满218.00元可用"
				}]

			}
		}
	}
</script>

<style lang="scss">
	.carousel {
		height: 350upx;
		position: relative;

		swiper {
			height: 100%;
		}

		.image-wrapper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 750upx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}

	.page {
		background-repeat: no-repeat;
		background-size: cover;
		/* background-image: url("~http://yao.hayzon.com/static/temp/111.png"); */
		height: 100%;
	}

	.banner {
		margin-top: 10upx;
	}

	.swiper-item {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		background: #eee;
		color: #fff;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
	}

	.input-view {
		display: flex;
		background-color: #e7e7e7;
		height: 30px;
		border-radius: 15px;
		padding: 0 4%;
		flex-wrap: nowrap;
		margin: 10upx 10upx;
		line-height: 30px;
	}

	.input-view .uni-icon {
		line-height: 30px !important;
	}

	.input-view .input {
		height: 30px;
		line-height: 30px;
		width: 94%;
		padding: 0 3%;
	}

	.goods-by-type {
		margin-top: 10upx;
		padding-left: 30upx;
		padding-right: 30upx;
	}

	.type-name {
		font-size: 1.2em;
		color: #666666;
		font-weight: bold;
		text-align: center;
	}

	.two-col {
		display: flex;
	}

	.good-item {
		margin-top: 8upx;
		display: flex;
	}

	.good-item image {
		flex-shrink: 0;
		width: 280upx;
		height: 280upx;
	}

	.good-item-info {
		flex: 2;
		padding-left: 15upx;
		position: relative;
	}

	.good-item-info text {
		display: block;
	}

	.good-item-info-price {
		position: absolute;
		color: #eb544d;
		bottom: 0;
		font-weight: bold;
		font-size: 1.1em;
	}

	.good-item-info image {
		width: 50upx;
		height: 50upx;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.vh-good-item {
		display: inline-block;
		width: 200upx;
		margin-right: 10upx;
	}

	.vh-good-item image {
		display: block;
		width: 100%;
		height: 200upx;
	}

	.vh-good-item text {
		display: block;
		font-size: 0.7em;
		overflow: hidden;
		text-align: center;
	}

	.vh-good-item-info-price {
		color: #eb544d;
		font-weight: bold;
	}

	.cart-head {
		margin-top: 10upx;
		background-color: #ffffff;
		padding-left: 30upx;
		padding-right: 30upx;
		line-height: 60upx;
		position: relative;
	}

	.cart-head image {
		width: 45upx;
		height: 45upx;
		vertical-align: text-bottom;
	}

	.edit {
		position: absolute;
		right: 30upx;
		top: 0;
		color: #0000ff;
	}

	.discount-box {
		margin-top: 10upx;
		margin-left: 30upx;
		margin-right: 30upx;
		background-image: url("~http://yao.hayzon.com/static/goods/boxbackground.png");
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-position: 0 0;
		color: #f39343;
		display: flex
	}

	.discount-box view {
		flex: 1;
		line-height: 170upx;
		padding-left: 40upx;
	}

	.discount-box view:nth-child(1) text:first-child {
		font-size: 2em;
		font-weight: bold;
	}

	.discount-box view:nth-child(2) {
		flex: 2;
		padding-left: 0;
		padding-top: 50upx;
	}

	.discount-box view:nth-child(2) text {
		line-height: 50upx;
		;
		display: block;
	}

	.discount-box view:nth-child(2) text:first-child {
		font-weight: bold;
		font-size: 1.2em;
	}

	.foot-link-box {
		font-size: 0.9em;
		text-align: center;
		color: #666666;
	}

	.foot-link-box text:nth-of-type(even) {
		margin-right: 15upx;
		margin-left: 15upx;
	}

	.ask-fix-icon {
		background-color: #ffffff;
		width: 110upx;
		height: 110upx;
		border-radius: 70upx;
		position: fixed;
		right: 50upx;
		bottom: 250upx;
	}

	.ask-fix-icon image {
		width: 90upx;
		height: 90upx;
		margin: 10upx 10upx;
	}
</style>
